<template>
  <div class="category-manager">
    <div class="page-header">
      <h2 class="page-title">活动分类管理</h2>
      <el-button type="primary" @click="handleCategoryPlus()" class="add-button">
        <el-icon><Plus /></el-icon>添加活动分类
      </el-button>
    </div>

    <div class="table-container">
      <el-card shadow="hover" class="table-card">
        <el-table 
          :data="tableData" 
          :border="true" 
          style="width: 100%"
          row-class-name="table-row"
          header-row-class-name="table-header"
          empty-text="暂无数据"
        >
          <el-table-column label="ID" prop="id" width="200px" />
          <el-table-column label="活动分类名称" prop="categoryName" width="200px" />
          <el-table-column fixed="right" label="操作" min-width="120px">
            <template #default="scope">
              <div class="action-buttons">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleEdit(scope.row)"
                >
                  <el-icon><Edit /></el-icon>编辑
                </el-button>
                <el-popconfirm
                  title="确定要删除此分类吗？"
                  @confirm="handleDelete(scope.row.id)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                >
                  <template #reference>
                    <el-button link type="danger" size="small">
                      <el-icon><Delete /></el-icon>删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 添加分类对话框 -->
    <el-dialog
      v-model="plusDialog.isVisible"
      :title="plusDialog.title"
      width="500px"
      align-center
      class="custom-dialog"
    >
      <el-form label-width="120px" label-position="left">
        <el-form-item label="分类名称">
          <el-input 
            v-model="plusForm.categoryName" 
            placeholder="请输入分类名称"
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="plusDialog.isVisible = false">取消</el-button>
          <el-button type="primary" @click="savePlus" :disabled="!plusForm.categoryName">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑分类对话框 -->
    <el-dialog
      v-model="editDialog.isVisible"
      :title="editDialog.title"
      width="500px"
      align-center
      class="custom-dialog"
    >
      <el-form label-width="120px" label-position="left">
        <el-form-item label="分类名称">
          <el-input 
            v-model="editForm.categoryName" 
            placeholder="请输入分类名称"
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialog.isVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit" :disabled="!editForm.categoryName">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElNotification } from "element-plus";
import { 
  Delete, Edit, Plus, Search, Refresh
} from '@element-plus/icons-vue';
import {
  getAllCategory,
  categoryAdd,
  categoryGetById,
  categoryEdit,
  categoryDeleteById,
} from "@/apis/admin/category";

// 存储表格数据的变量
const tableData = ref([]);

/**
 * 分页查询
 * @param {*} filter 过滤
 * @param {*} search 搜索
 * @param {*} orders 排序
 */
const getPage = async () => {
  try {
    const result = await getAllCategory();
    tableData.value = result.data;
    console.log(result);
  } catch (error) {
    ElMessage.error('获取分类数据失败，请稍后重试');
    console.error(error);
  }
};

/**
 * 添加表格数据
 */
const plusForm = ref({
  categoryName: ''
});

/**
 * 添加对话框
 */
const plusDialog = reactive({
  isVisible: false,
  title: "添加活动分类",
});

/**
 * 修改表格数据
 */
const editForm = ref({});

/**
 * 修改对话框
 */
const editDialog = reactive({
  isVisible: false,
  title: "编辑活动分类",
});

// 生命周期
onMounted(() => {
  // 页面加载的时候立刻执行一次请求
  getPage();
});

// 保存新增
const savePlus = async () => {
  if (!plusForm.value.categoryName) {
    ElMessage.warning('请输入分类名称');
    return;
  }
  
  try {
    await commitPlusRow(plusForm.value);
    plusDialog.isVisible = false;
    plusForm.value = { categoryName: '' };
  } catch (error) {
    ElMessage.error('添加分类失败，请稍后重试');
    console.error(error);
  }
};

// 保存编辑
const saveEdit = async () => {
  if (!editForm.value.categoryName) {
    ElMessage.warning('请输入分类名称');
    return;
  }
  
  try {
    await commitEditRow(editForm.value);
    editDialog.isVisible = false;
    editForm.value = {};
  } catch (error) {
    ElMessage.error('编辑分类失败，请稍后重试');
    console.error(error);
  }
};

// 编辑数据
const handleEdit = async (row) => {
  editDialog.isVisible = true;
  editForm.value = { ...row };
};

const commitEditRow = async (row) => {
  await categoryEdit(row);
  getPage();
};

// 添加数据
const handleCategoryPlus = async () => {
  plusDialog.isVisible = true;
  plusForm.value = { categoryName: '' };
};

const commitPlusRow = async (row) => {
  await categoryAdd(row);
  getPage();
};

// 删除数据
const handleDelete = async (id) => {
  let result;
  try {
    result = await categoryDeleteById(id);
    getPage();
  } catch (error) {
    ElMessage.error(result.message);
    console.error(error);
  }
};
</script>

<style scoped>
.category-manager {
  padding: 20px;
  height: 100%;
  background-color: #f5f7fa;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.add-button {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.table-container {
  margin-bottom: 20px;
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

:deep(.table-header) {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: 600;
  font-size: 14px;
}

:deep(.table-row:hover) {
  background-color: #f5f7fa;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.custom-dialog :deep(.el-dialog__header) {
  border-bottom: 1px solid #ebeef5;
  padding: 20px;
  margin-right: 0;
}

.custom-dialog :deep(.el-dialog__footer) {
  border-top: 1px solid #ebeef5;
  padding: 15px 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.custom-dialog :deep(.el-dialog__body) {
  padding: 30px 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-table) {
  border-radius: 5px;
  overflow: hidden;
}
</style>